<template>
  <el-form class="el-form-col" label-width="90px" :label-position="labelPosition">
    <Portlet title="入库单信息" style="position:relative;">
      <el-row :gutter="15">
        <el-col :lg="6" :md="12">
          <el-form-item label="入库单号:">
            <span>{{ warehousDetail.inputWarehouseNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="入库仓:">
            <span>{{ warehousDetail.warehouse }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="商家名称:">
            <span>{{ warehousDetail.cargoOwner }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button class="pull-right" type="text" @click="print"  style="position:absolute;top:8px;right:10px;">打印入库拣货单</el-button>
    </Portlet>
    <Portlet title="拣货单信息">
      <el-row :gutter="15">
        <el-col :lg="6" :md="12">
          <el-form-item label="拣货单号:">
            <span>{{ warehousDetail.code }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="拣货员:">
            <span>{{ warehousDetail.sortingPersonName }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="分配人:">
            <span>{{ warehousDetail.distributePersonName }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="分配时间:">
            <span>{{ warehousDetail.distributeTime | unixTimestampFilter}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </Portlet>
    <Portlet title="用户信息">
      <el-row :gutter="15">
        <el-col :lg="6" :md="12">
          <el-form-item label="用户姓名:">
            <span>{{ warehousDetail.consigneName }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="用户电话:">
            <span>{{ warehousDetail.consignePhone }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="24">
          <el-form-item label="用户地址:">
            <span>
              {{warehousDetail.consigneProvince}}
              {{warehousDetail.consigneCity}}
              {{warehousDetail.consigneDistrict}}
              {{warehousDetail.consigneAddress}}
            </span>
          </el-form-item>
        </el-col>
      </el-row>
    </Portlet>
    <Portlet title="库位信息">
      <PackageTable :value="productDetailBeans">
        <el-table-column
          prop="positionName"
          label="库位">
        </el-table-column>
      </PackageTable>
    </Portlet>
    <PrintModal ref="PrintModal" :sortingId="id"></PrintModal>
  </el-form>
</template>
<script>
import {filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
import Pagination from '@/components/Pagination'
import PrintModal from '@/views/oms/enterWarehouse/warehousePicklist/PrintModal'
import PackageTable from '@/views/oms/business/PackageTable'
export default {
  name: 'enterWarehousePicklistShow',
  components: {
    Pagination,
    PrintModal,
    PackageTable
  },
  filters: {
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  data() {
    return {
      labelPosition: 'left',
      id: this.$route.params.id,
      warehousDetail: {},
      productDetailBeans: []
    }
  },
  created() {
    this.getDetail()
    this.getproductDetail()
  },
  computed: {},
  methods: {
    getDetail() {
      this.$ajax.get('/ms-warehouse-order/recordOrder/findSotingDetail', {id: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.warehousDetail = response.data || {}
      })
    },
    getproductDetail() {
      this.$ajax.get('/ms-warehouse-order/recordOrder/orderDetailList', {id: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.productDetailBeans = response.data || []
      })
    },
    print() {
      this.$refs.PrintModal.show()
    }
  }
}
</script>
